<template>
  <div>
    <div ref="Dom" class="BOX" style="width: 1300px; height: 700px"></div>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import {getxueyuanjifEchartslistdata} from "@/api/echartsbm/echartsbm";

  export default {
    data() {
      return {};
    },

    mounted() {
      //获取Dom节点
      let chartDom = this.$refs.Dom;
      //初始化echarts实例
      let myChart = this.$echarts.init(chartDom);
      //绘制图标
      let option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#FFF",
            },
          },
        },
        title: {
          text: "各学院的总分分数排名",
          x: "left",
          top: 0,
          left: 380,
          textStyle: {
            fontSize: 16,
            color: "#0069f9"
          }
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ["line", "bar"]},
            restore: {show: true},
            saveAsImage: {show: true},
          },
        },
        legend: {
          data: ["Major", "SportGradeA"],
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "分数",
            min: 0,
            interval: 10,
            axisLabel: {
              formatter: "{value} 分",
            },
          },
          {
            type: "value",
            name: "分数",
            min: 0,
            //   max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} 分",
            },
          },
        ],
        series: [
          {
            name: "Major",
            type: "bar",
            //设置柱状图大小
            barWidth: 70,
            barGap: 1, //柱子之间间距
            showBackground: true,
            //设置柱状图渐变颜色
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#006e5f" // 0% 处的颜色
                }, {
                  offset: 0.6,
                  color: "#722e41" // 60% 处的颜色
                }, {
                  offset: 1,
                  color: "#01ccfe" // 100% 处的颜色
                }], false)
              }
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + "积分";
              },
            },
            data: [],
          },
          {
            name: "SportGradeA",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + "积分";
              },
            },
            data: [],
          },
        ],
      };
      getxueyuanjifEchartslistdata().then((response) => {
        response.data.forEach((item) => {
          option.series[0].data.push({name: item.xy, value: item.JF});
          option.series[1].data.push({value: item.JF});  //积分
          option.xAxis[0].data.push({value: item.xy});   //专业
        });
        // console.log(option)
        option && myChart.setOption(option);
      });
    },
  };
</script>

<style scoped>
  .BOX {
    position: relative;
    margin: 60px 0px;
  }

  span {
    font-size: 18px;
    color: rgb(155, 27, 27);
    position: relative;
    /* left: 690px;
     top: 60px; */
  }
</style>
